const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

// 复用loader
const commonCssLoader = [
    // 替换 style-loader,将css打包到单独的css文件
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        // css兼容性处理
        // 还需在package.json 中定义browserlist
        loader:'postcss-loader',
        options:{
            ident:'postcss',
            plugins:()=>[require('postcss-preset-env')()]
        }
    }
]

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'public')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[...commonCssLoader]
            },
            {
                test:/\.less/,
                use:[
                    ...commonCssLoader,
                    'less-loader'
                ]
            },
            // eslint 语法检查配置
            // 在package.json中配置eslintConfig -->airbnb
            {
                test:/\.js$/,
                exclude:/node_modules/,
                // 优先执行
                enforce:'pre',
                loader:'eslint-loader',
                options:{
                    fix:true
                }
            },
            {
                // js 兼容性处理
                // 依赖于 @babel/core 核心库
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                options:{
                    preset:[
                        // 基础语法兼容
                        '@babel/preset-env',
                        // 按需加载 兼容高级语法
                        {
                            useBuiltIns:'usage',
                            corejs:{version:3},
                            target:{
                                chrome:'60',
                                // ...
                            }
                        }
                    ]
                }
            },
            {
                // 图片处理
                // 依赖于 file-loader
                test:/\.(jpg|png|gif)/,
                loader:'url-loader',
                option:{
                    limit:8*1024,
                    name:'[hash:10].[ext]',
                    outputPath:'imgs',
                    esModule:false,
                }
            },
            {
                // 处理html中的图片资源
                test:'\.html$',
                test:'html-loader',
            },
            {
                // 处理其他文件
                exclude:/\.(js|css|less|html|jpg|png|gif)/,
                loader:'file-loader',
                options:{
                    outputPath:'media'
                }
            }
        ]
    },
    plugins:[
        // 将css文件单独提取出来
        new MiniCssExtractPlugin({
            // 提取到指定文件
            filename:'css/built.css'
        }),
        // 压缩css文件
        new OptimizeCssAssetsWebpackPlugin(),
        // 自动生成html文件
        new HtmlWebpackPlugin({
            // 生成html文件的模板
            template:'./src/index.html',
            // html文件压缩
            minify:{
                // 清楚空格
                collapseWhitespace:true,
                // 清楚注释
                removeComments:true,
            }
        })
    ],
    // 生产模式默认开启js代码压缩
    mode:'production',
}